<template>
  <div class="cart-shop">
    <div class="otherNogs" v-if="itemName">
      <div class="weui-flex pl line-bottom line-top">
        <div class="weui-flex__item pl">
          <input class="weui-input _input" v-model="otherVal" type="tel" placeholder="其他非油品">
        </div>
      </div>
    </div>
    <div class="line-top pl">
      <div class="weui-flex pl line-bottom">
        <div class="weui-flex__item">
          <div class="name color-3">猜你喜欢</div>
        </div>
      </div>
      <div class="cart-shop-list">
        <div class="weui-flex pl line-bottom" v-for="item,index in getGoods">
          <div class="img">
            <img :src="item.mainPic?URL+item.mainPic:nopic" :width="!item.mainPic?50:60" />
          </div>
          <div class="weui-flex__item pd10">
            <div class="name">{{item.itemName}}<span class="price color-3 font-12">￥{{item.itemTruePrice}}</span></div>
            <div class="info font-12">月销 {{item.alreadySell}} 单</div>
          </div>
          <div class="cart">
            <div class="cart-input-number">
              <span class="cart-del" @click="inputDel(index)"></span>
              <span class="cart-input">{{item.itemAmount}}</span>
              <span class="cart-add" @click="inputAdd(index)"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  const config = require('~src/config')
  import { mapGetters } from 'vuex'
  const util = require('~src/lib/util')
  const cart = JSON.parse(util.localItem.get('cart'))
  export default {
    name: 'j-shopcart',
    data () {
      return {
        URL: config._API_,
        nopic: config._URL_ + '/static/images/nopic.png',
        shopcart: [],
        otherVal: '',
        itemName: cart.itemName

      }
    },
    computed: {
      ...mapGetters({
        getGoods: 'getGoods'
      })
    },
    watch: {
      shopcart (val) {
        this.$emit('on-shop-cart', val)
      },
      otherVal (val) {
        this.$emit('on-other-nogas', val)
      }
    },
    methods: {
      // 添加
      inputAdd (index) {
        var current = this.getGoods[index]
        if (current.itemAmount >= current.itemNumber) {
          this.$store.dispatch('TOAST_SHOW', {content: '库存不够', msg: true})
        } else {
          current.itemAmount++
          if (current.itemAmount === 1) {
            this.shopcart.splice(index, 0, {
              noGasItemId: current.id,
              itemNumber: current.itemAmount
            })
          } else {
            this.$set(this.shopcart,index,{
              noGasItemId: current.id,
              itemNumber: current.itemAmount
            })
          }
        }
      },
      // 删除
      inputDel (index) {
        var current = this.getGoods[index]
        if(current.itemAmount === 1){
          this.shopcart.splice(index, 1)
        }
        if (current.itemAmount <= 0) {
          this.$store.dispatch('TOAST_SHOW', {content: '数量不为能0', msg: true})
        } else {
          current.itemAmount--
          if (current.itemAmount >= 1 && this.shopcart.length >0) {
            this.$set(this.shopcart,index,{
              noGasItemId: current.id,
              itemNumber: current.itemAmount
            })
          }
        }
      }
    }
  }
</script>
<style lang="scss">
  .otherNogs{
    padding: 3px 0 12px;
    .weui-flex{
      padding:0;
    }
  }
  ._input{
    padding: 10px 0;
    text-indent: 15px;
  }
</style>
